<template>
  <div class="page-datetime">
    <h1 class="page-title">Datetime Picker</h1>
    <div class="page-datetime-wrapper">
      <rst-btn @click.native="open('picker1')" type="primary" >点击弹出 DateTime Picker</rst-btn>
      <rst-btn @click.native="open('picker2')" type="primary" >点击弹出 Date Picker</rst-btn>
      <rst-btn @click.native="open('picker3')" type="primary" >点击弹出 Time Picker</rst-btn>
      <rst-btn @click.native="open('picker4')" type="primary" >自定义模板</rst-btn>
      <rst-btn @click.native="open('picker5')" type="primary" >设定初始值</rst-btn>
    </div>
    <datetime-picker
      ref="picker1"
      v-model="value"
      @confirm="handleChange" >
    </datetime-picker>
    <datetime-picker
      ref="picker2"
      type="date"
      v-model="value2"
      @confirm="handleChange">
    </datetime-picker>
    <datetime-picker
      ref="picker3"
      type="time"
      v-model="value3"
      @confirm="handleChange">
    </datetime-picker>
    <datetime-picker
      ref="picker4"
      type="date"
      v-model="value4"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleChange">
    </datetime-picker>
    <datetime-picker
      ref="picker5"
      type="time"
      v-model="value5"
      @confirm="handleChange">
    </datetime-picker>
  </div>
</template>

<script type="text/babel">
  import Vue from 'vue'
  import rstbtn from '@/components/button.vue'
  import Datetime from '@/components/datetime-picker.vue'
  Vue.component(Datetime.name, Datetime)
  export default {
    components: {
      'rst-btn': rstbtn
    },
    data() {
      return {
        value: null,
        value2: null,
        value3: null,
        value4: null,
        value5: '04:32',
        visible: false,
        visible2: false,
        visible3: false,
        visible4: false,
        visible5: false
      };
    },
    methods: {
      open(picker) {
        this.$refs[picker].open();
      },
      handleChange(value) {
        alert(value);
      },
      switchVisitDateStatus(){
        alert(2);
      }
    }
  };
</script>
